<template>
	<!-- 外面最大的div -->
	<view class="sideBox">
		<view class="center">
			<!-- header部分 -->
			<view class="header">
				<text>填写</text>
				<view class="submitBox">
					<text>提交</text>
				</view>
			</view>
			<!-- 提交的内容部分 -->
			<view class="section">
				<!-- 第一行 -->
				<view class="sec1">
					<view class="name">
						巡检日期
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
					</view>
				</view>
				<!-- 第二行 -->
				<view class="sec1">
					<view class="name">
						读数(m3)
					</view>
					 <view class="uni-form-item uni-column">
						<input class="uni-input" type="number" placeholder="请填写" />
					</view>
					
				</view>
				<!-- 第三行 -->
				<view class="sec1">
					<view class="name">
						燃气泄漏
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
						</picker>
					</view>
				</view>
				<!-- 第四行 -->
				<view class="sec1">
					<view class="name">
						安全系数
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange2" :value="index2" :range="array2">
							<view class="uni-input">{{array2[index2]}}</view>
						</picker>
					</view>
				</view>
				<!-- 第五行  视频图片-->
				<view class="sec5">
					<text>视频图片</text>
					<view class="videoBox">
						<uni-file-picker 
						    v-model="imageValue" 
						    fileMediatype="image" 
						    mode="grid" 
						    @select="select" 
						    @progress="progress" 
						    @success="success" 
						    @fail="fail" 
						/>
					</view>
					
				</view>
				
					
			</view>
			
			
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		})
		return {
			title: 'picker',
			array: ['无', '轻微', '严重'],
			array2: ['低', '中', '高'],
			index: 0,
			index2: 0,
			date: currentDate,
			imageValue:[]
		}
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value)
			this.index = e.target.value
		},
		bindPickerChange2: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value)
			this.index2 = e.target.value
		},
		bindDateChange: function(e) {
			this.date = e.target.value
		},

		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		
		// 获取上传状态
		select(e){
			console.log('选择文件：',e)
		},
		// 获取上传进度
		progress(e){
			console.log('上传进度：',e)
		},

		// 上传成功
		success(e){
			console.log('上传成功')
		},

		// 上传失败
		fail(e){
			console.log('上传失败：',e)
		}
	
	}
}
</script>

<style lang="less" scoped>
.sideBox {
	width: 750rpx;
	.center{
		width: 690rpx;
		margin: 0 auto;
		.header {
			width: 690rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 58rpx;
			>text {
				font-size: 32rpx;
				font-weight: 600;
			}
			.submitBox {
				width: 120rpx;
				height: 60rpx;
				border-radius: 12rpx;
				background: #2475fb;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
			}
		}
		.section {
			width: 690rpx;
			.sec1 {
				width: 660rpx;
				height: 80rpx;
				background: #f2f4f5;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				margin-top: 40rpx;
				// justify-content:;
				.name {
					font-size: 22rpx;
					color: #222;
					margin-right: 30rpx;
				}
			}
			.sec5 {
				>text {
					height: 90rpx;
					display: flex;
					align-items: center;
					font-size: 22rpx;
				}
				.videoBox {
					width: 690rpx;
					height: 400rpx;
					background: #f2f4f5;
				}
			}
		}
	}
}
</style>
